<!--  -->
<template>
  <el-dialog
    class="program_edit_text_dialog"
    id="dialog-program"
    :center="true"
    :title="is_add ? '新增' : '编辑'"
    :visible="dialogformvisible_edit"
    :before-close="handleClose_edit"
    :modal-append-to-body="false"
  >
    <div ref="outdiv" class="outdiv">
      <div
        class="msgbox"
        :style="{
          'background-color': program_info.back_color,
          width: program_info.width + 'px',
          height: program_info.height + 'px',
        }"
      >
        <p
          class="msgcontent"
          v-text="program_info.url"
          :style="{
            'font-size': program_info.font_size + 'px',
            color: program_info.color,
          }"
        ></p>
      </div>
      <div class="msgedit" :style="{ width: program_info.width + 'px' }">
        <textarea
          v-model.trim="program_info.url"
          class="edittext"
          id=""
          cols="60"
          rows="6"
          style="font-size: 18px"
          placeholder="请输入内容"
          @change="textChange"
        ></textarea>
        <div class="msgctrl">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="setfontsize(1)"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-minus"
            @click="setfontsize(0)"
            circle
          ></el-button>
          <el-color-picker
            title="字色"
            v-model="program_info.color"
            :predefine="predefineColors"
          >
          </el-color-picker>
          <el-color-picker
            title="背景"
            v-model="program_info.back_color"
            :predefine="predefineColors_back"
          >
          </el-color-picker>
        </div>
        <div class="msgsizeselect">
          <div>
            <!-- :disabled="!is_add" -->
            <!-- v-model.trim="program_info.name" -->
            <!-- 改变文字内容, 自动改变 名称, -->
            <el-input
              :value="program_info.name"
              maxlength="10"
              class="elinput-pname"
              title="节目名称"
              placeholder="请输入节目名称"
              disabled
            >
            </el-input>
            <el-select
              class="el-select-size"
              v-model="screenSizeStr"
              @change="changeScreenSize"
              title="目标屏幕尺寸"
              placeholder="请选择屏幕尺寸"
              :disabled="!is_add"
            >
              <el-option
                v-for="(item, index) in screenSizeList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogformvisible_edit', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="saveTextPorgram">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
//test  only
//import axios from "axios";
export default {
  name: "Program_edit_text_dialog",
  data() {
    return {
      ledsList: [],
      predefineColors: [
        "rgb(255, 0, 0)",
        "rgb(0, 255, 0)",
        "rgb(0, 0, 255)",
        "rgb(255, 255, 0)",
      ],
      predefineColors_back: [
        "rgb(255, 0, 0)",
        "rgb(0, 0, 255)",
        "rgb(0, 0, 0)",
      ],

      program_info: {
        resource_id: this.text_info.resource_id,
        name: this.text_info.name,
        type: this.text_info.type,
        color: this.text_info.color, //'#00ff00',
        back_color: this.text_info.back_color, //'#000000',
        url: this.text_info.url, //"请输入",
        font_size: this.text_info.font_size, //20,
        width: this.text_info.width,
        height: this.text_info.height,
      },
      dialogformvisible_edit_data: this.dialogformvisible_edit,
      
      screenSizeList: [],
    };
  },
  computed: {
    screenSizeStr:{
      get:function(){
        console.log(this.program_info.width + '*'+ this.program_info.height);
        //首次32 
        if(this.program_info.width <= 32 || this.program_info.height <= 32){
          return '请选择尺寸'
        }
        return this.program_info.width + '*'+ this.program_info.height
      },
      set:function(v){
        let w_h = v.split('*')
        this.program_info.width = w_h[0]
        this.program_info.height = w_h[1]        
      }
    },

  },
  watch: {
    dialogformvisible_edit:function (n,o){
      console.log('0000000000');
    }
  },

  props: ["dialogformvisible_edit", "is_add", "text_info"],
  methods: {
    async getAllScreenList() {
      let ret = await this.$http.get(`screens`);
      let { leds } = ret.data.data;
      this.ledsList = leds;
    },

    //textChange textArea 改变后,修改 节目名,
    textChange() {
      this.program_info.name =
        this.program_info.url.substr(0, 10) + this.screenSizeStr;
      console.log(this.program_info.name);
    },

    changeScreenSize() {
      // let w_h_str_arr = this.screenSizeStr.split("*");
      // this.program_info.width = w_h_str_arr[0];
      // this.program_info.height = w_h_str_arr[1];
    },
    setfontsize(flag) {
      if (1 == flag) {
        this.program_info.font_size += 2;
      } else {
        if (this.program_info.font_size > 12) {
          this.program_info.font_size -= 2;
        }
      }
    },
    saveTextPorgram() {
      // this.$message.success("添加屏幕信息提交到后台/screens/");

      // content  <> null
      if (!this.program_info.url) {
        this.$message.error("内容不能为空");
        return;
      }

      if (!this.program_info.name) {
        this.$message.error("节目名不能为空");
        return;
      }

      if (this.is_add) {
        // axios.post('programs',this.program_info)
        this.$http.post("resources", this.program_info);
        console.log("向后台发送新增节目", this.program_info);
      } else {
        //后台获取节目信息带 programid, 编辑时传入,提交时
        // axios.put(`programs/${this.program_info.id}`,this.program_info)
        this.$http.put("resources", this.program_info);

        console.log("向后台发送修改节目", this.program_info);
      }
      this.$emit("update:dialogformvisible_edit", false);
      // this.$message.error("数据填写有错误");
    },
    handleClose_edit(done) {
      //console.log('done',done);

      this.$confirm("确认关闭？")
        .then((_) => {
          //done(); //done 干啥的
          this.$emit("update:dialogformvisible_edit", false);
        })
        .catch((_) => {});
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    await this.getAllScreenList();
    let sizeSet = new Set();
    this.ledsList.forEach((v, i) => {
      sizeSet.add(v.width + "*" + v.height);
    });
    console.log(sizeSet, "sizeSet");

    this.screenSizeList = [...sizeSet];
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
/* .outdiv{
  width: 100%;
} */
.msgbox {
  margin: 0 auto;
  padding: 0;
  /* width  height 动态改变 */
  width: 300px;
  height: 200px;
  background-color: #000;
  /* border: 1px solid red; */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.msgbox {
  /*  */
  font-family: "黑体";
  color: lime;
  white-space: pre-wrap;
}

.msgedit {
  margin: 10px auto;
  /* width: 500px; */
}
.msgedit textarea {
  width: 100%;
  box-sizing: border-box;
}
.msgctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msgsizeselect {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msgcontent {
  text-align: center;
}
.el-select-size {
  width: 120px;
}
/*修改 渲染后的 标签 需要在全局css里改;*/
/* .elinput-pname input{
  background-color: red;
  padding: 0 2px;
} */

.elinput-pname {
  font-size: 16px;
  width: 180px;
}
</style>
